<template>
  <div class="main">
    <div style="display: inline; text-align:left; position: relative;">
      <div style="margin-left: 10px; margin-top: 10px; width: 200px; position: absolute;">
        <el-avatar :size="180"
          :src="user.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'">
        </el-avatar>
      </div>
      <div style="position:relative; left: 220px; height: 184px; width: 70%; margin-top: 10px;">
        <div style="position:absolute; top: 80px; height: 50%; width: 100%;  display: flex; flex-direction: row;">
          <div style="position:absolute; display: flex; flex-direction: column; width: 40%;">
            <div>
              <span id="h-name">
                {{ user.username }}
              </span>
            </div>
            <el-divider></el-divider>
            <div>
              <span id="h-description">
                {{ user.description || '这个人很懒，什么都没留下' }}
              </span>
            </div>
          </div>
          <el-button v-if="!isSelf" type="primary" size="small" style="position:absolute; top: 24px; right: 0px;"
            @click="follow"><i class="el-icon-finished"></i>&nbsp;&nbsp;{{ buttonContent }}</el-button>
          <el-button v-else type="primary" size="small" style="position:absolute; top: 24px; right: 0px;"
            @click="goEdit"><i class="el-icon-edit"></i>&nbsp;&nbsp;编辑资料</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/API/request';
import { Message } from 'element-ui';
export default {
  name: 'BasicInfo',
  props: {
    user: {},
  },
  data() {
    return {

    };
  },
  computed: {
    isSelf() {
      return this.user.id === this.$store.state.userInfo.id;
    },
    followed() {
      return this.$store.state.follows.includes(this.user.id);
    },
    buttonContent() {
      return this.followed ? '取消关注' : '关注';
    },
  },
  methods: {
    goEdit() {
      this.$router.push({ path: '/edit', query: { id: this.user.id } });
    },
    follow() {
      if (this.followed) {
        request.post('/user/unfollow', {
          bloggerId: this.user.id,
          followerId: this.$store.state.userInfo.id,
        }).then((res) => {
          if (res.data.code === 200) {
            Message({
              type: 'success',
              message: '取消关注成功',
              customClass: 'message-global',
            });
            this.$store.commit('unfollow', this.user.id);
          } else {
            Message({
              type: 'error',
              message: res.data.msg,
              customClass: 'message-global',
            });
          }
        });
      } else {
        request.post('/user/follow', {
          bloggerId: this.user.id,
          followerId: this.$store.state.userInfo.id,
        }).then((res) => {
          if (res.data.code === 200) {
            this.$store.commit('follow', this.user.id);
            Message({
              message: '关注成功',
              type: 'success',
              customClass: 'message-global',
            });
          } else {
            Message({
              message: res.data.msg,
              type: 'error',
              customClass: 'message-global',
            });
          }
        });
      }

    }
  },
}
</script>

<style scoped>
.main {
  margin-top: 10px;
  display: inline-block;
  text-align: left;
  width: 60%;
  min-width: 800px;
  height: 200px;
  border-radius: 5px;
  box-shadow: 3px 3px 3px 3px #c4c3c3;
  background-color: #fff;
}

.el-divider {
  margin-top: 10px;
  margin-bottom: 10px;
}

#h-name {
  display: inline-block;
  margin-right: 5px;
  font-weight: 700;
  line-height: 18px;
  font-size: 25px;
  vertical-align: middle;
}

#h-description {
  display: inline-block;
  margin-right: 5px;
  font-weight: 500;
  line-height: 18px;
  font-size: 15px;
  color: grey;
  vertical-align: middle;
}
</style>